<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>2.v-show指令</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <style>
    .banner {
      height: 100px;
      font-size: 30px;
      background: gainsboro;
    }
  </style>
  <body>
    <!-- 准备好一个容器-->
    <div id="app">
        <h1 v-show="bol">{{str}}</h1>
      <div v-show="!isVIP" class="banner">这是广告！！！</div>
    </div>
  </body>

  <script type="text/javascript">
    //阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false;

    new Vue({
      el: "app",
      data: {
        str:'v-show条件渲染',
        bol: "123",
        isVIP: true,
      },
    });
  </script>
</html>
